<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted, computed } from 'vue';
import { Search, Operation, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const columns = [
    {
        title: '合同编号',
        key: 'contractnumber',
        sortable: true,
    },
    {
        title: '客户简称',
        key: 'customerabbreviation',
        filterable: true,
        customer: true
    },
    {
        title: '客户编号',
        key: 'customernumber',
        filterable: true
    },
    {
        title: '服务项',
        key: 'serviceitem'
    },
    {
        title: '合同状态',
        key: 'contractstatus'
    },
    {
        title: '合同金额',
        key: 'contractamount',
        type: 'number'
    },
    {
        title: '已登记收入',
        key: 'registeredrevenue',
        type: 'number'
    },
    {
        title: '已审核收入',
        key: 'auditedrevenue',
        type: 'number'
    },
    {
        title: '支出金额',
        key: 'expenditureamount',
        type: 'number'
    },
    {
        title: '退款金额',
        key: 'refundamount',
        type: 'number'
    },
    {
        title: '利润',
        key: 'profit',
        type: 'number'
    },
    {
        title: '开始日期',
        key: 'startdate'
    },
    {
        title: '到期日期',
        key: 'expirydate'
    },
    {
        title: '签单人',
        key: 'signatory'
    },
    {
        title: '签单日期',
        key: 'signingdate'
    },
    {
        title: '审核人',
        key: 'auditor'
    },
    {
        title: '合同解除时间',
        key: 'contractterminationtime'
    },
    {
        title: '终验状态',
        key: 'finalacceptancestatus'
    }
];

const mockData = ref([]);
const loading = ref(true)
const activeName = ref('first')
const searchKeyword = ref('') // 搜索关键词
const dialogVisible = ref(false) // 控制对话框显示/隐藏
const currentEditId = ref(null) // 当前编辑的合同ID

// 编辑合同表单数据 - 修改提成设置部分
const contractForm = ref({
    contractStatus: '待提交',
    signingDate: '2025-10-20',
    signer: '表格体',
    internalReferrer: '',
    productName: '自定义/代账合同',
    renewalStatus: '未续签',
    contractNumber: 'DZ202510200001',
    backupNumber: '',
    contractYears: 1,
    contractMonths: 0,
    contractStartDate: '2025-10-01',
    contractEndDate: '2026-09-30',
    autoExtension: false,
    voucherHandover: '上门取',
    source: '',
    otherReferrer: '',
    serviceItems: [],
    giftServiceItems: [],
    advanceReceipts: [],
    defaultExpenses: [],
    contractRemarks: '',
    // 提成设置 - 修改为两个字段
    commissionMainType: '按价格比例提成', // 主类型：按价格比例提成、按单提成
    commissionSubType: '不提成' // 子类型：不提成、按比例提成、按固定金额提成
})

// 计算属性：判断是否显示子提成类型选项
const showCommissionSubTypes = computed(() => {
    return contractForm.value.commissionMainType === '按单提成'
})

// 打开编辑合同对话框
const openEditContractDialog = (row) => {
    currentEditId.value = row.contractnumber
    
    // 填充表单数据 - 将表格行数据映射到表单字段
    // 合同基本信息
    contractForm.value.contractStatus = row.contractstatus || '待提交'
    contractForm.value.signingDate = row.signingDate || '2025-10-20'
    contractForm.value.signer = row.signer || '表格体'
    contractForm.value.internalReferrer = row.internalReferrer || ''
    contractForm.value.productName = row.serviceproduct || '自定义/代账合同'
    contractForm.value.renewalStatus = row.renewalstatus || '未续签'
    contractForm.value.contractNumber = row.contractnumber || ''
    contractForm.value.backupNumber = row.backupNumber || ''
    
    // 合同期限
    contractForm.value.contractYears = row.contractYears || 1
    contractForm.value.contractMonths = row.contractMonths || 0
    contractForm.value.contractStartDate = row.contractStartDate || '2025-10-01'
    contractForm.value.contractEndDate = row.expirydate || '2026-09-30'
    
    // 其他字段
    contractForm.value.autoExtension = row.autoExtension || false
    contractForm.value.voucherHandover = row.voucherHandover || '上门取'
    contractForm.value.source = row.source || ''
    contractForm.value.otherReferrer = row.otherReferrer || ''
    contractForm.value.contractRemarks = row.contractRemarks || ''
    
    // 提成设置 - 修改处理逻辑
    // 根据原有commissionType字段判断主类型和子类型
    if (row.commissionType === '按价格比例提成' || !row.commissionType) {
        contractForm.value.commissionMainType = '按价格比例提成'
        contractForm.value.commissionSubType = '不提成'
    } else if (row.commissionType === '按单提成') {
        contractForm.value.commissionMainType = '按单提成'
        contractForm.value.commissionSubType = '不提成'
    } else {
        contractForm.value.commissionMainType = '按单提成'
        contractForm.value.commissionSubType = row.commissionType || '不提成'
    }
    
    dialogVisible.value = true
}

// 关闭合同对话框
const closeContractDialog = () => {
    dialogVisible.value = false
    currentEditId.value = null
}

// 提交编辑合同表单
const submitContract = () => {
    // 这里可以添加表单验证逻辑
    console.log('合同表单数据:', contractForm.value)
    
    // 合并提成设置数据
    let commissionType = contractForm.value.commissionMainType
    if (contractForm.value.commissionMainType === '按单提成') {
        commissionType = contractForm.value.commissionSubType
    }

    // 编辑模式：更新现有数据
    const index = mockData.value.findIndex(item => item.contractnumber === currentEditId.value)
    if (index !== -1) {
        // 更新表格数据
        mockData.value[index] = {
            ...mockData.value[index],
            contractnumber: contractForm.value.contractNumber,
            contractstatus: contractForm.value.contractStatus,
            renewalstatus: contractForm.value.renewalStatus,
            expirydate: contractForm.value.contractEndDate,
            serviceproduct: contractForm.value.productName,
            commissionType: commissionType,
            // 可以添加其他需要更新的字段
        }
        ElMessage.success('合同修改成功')
    }
    
    // 关闭对话框
    closeContractDialog()
}

// 删除合同
const handleDelete = (row) => {
    ElMessageBox.confirm(
        `确定要删除合同 "${row.contractnumber}" 吗？此操作不可恢复。`,
        '确认删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const index = mockData.value.findIndex(item => item.contractnumber === row.contractnumber)
        if (index !== -1) {
            mockData.value.splice(index, 1)
            ElMessage.success('合同删除成功')
        }
    }).catch(() => {
        // 用户取消删除
    })
}

// 计算属性：根据搜索关键词过滤数据
const filteredData = computed(() => {
    if (!searchKeyword.value) {
        return mockData.value;
    }
    
    const keyword = searchKeyword.value.toLowerCase();
    return mockData.value.filter(item => {
        return (
            (item.contractnumber && item.contractnumber.toLowerCase().includes(keyword)) ||
            (item.customerabbreviation && item.customerabbreviation.toLowerCase().includes(keyword)) ||
            (item.customernumber && item.customernumber.toLowerCase().includes(keyword))
        );
    });
});

// 计算属性：自动统计表格中的金额数据（基于过滤后的数据）
const amountStatistics = computed(() => {
    const dataToUse = filteredData.value;
    
    if (!dataToUse || dataToUse.length === 0) {
        return {
            totalAmount: 0,
            receivedAmount: 0,
            unreceivedAmount: 0,
            auditedRevenue: 0,
            refundAmount: 0,
            profit: 0
        };
    }

    const stats = dataToUse.reduce((acc, item) => {
        acc.totalAmount += Number(item.contractamount) || 0;
        acc.receivedAmount += Number(item.registeredrevenue) || 0;
        acc.auditedRevenue += Number(item.auditedrevenue) || 0;
        acc.refundAmount += Number(item.refundamount) || 0;
        acc.profit += Number(item.profit) || 0;
        return acc;
    }, {
        totalAmount: 0,
        receivedAmount: 0,
        auditedRevenue: 0,
        refundAmount: 0,
        profit: 0
    });

    // 未收金额 = 合同金额 - 已登记收入
    stats.unreceivedAmount = stats.totalAmount - stats.receivedAmount;

    return stats;
});

const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if (activeName.value === 'first') {
            mockData.value = generateFirstTabData();
        } else if (activeName.value === 'second') {
            mockData.value = generateSecondTabData();
        } else {
            mockData.value = generateThirdTabData();
        }
        loading.value = false
    }, 2000)
}

// 处理搜索
const handleSearch = () => {
    // 搜索逻辑已通过计算属性filteredData实现
    console.log('搜索关键词:', searchKeyword.value);
}

// 清除搜索
const clearSearch = () => {
    searchKeyword.value = '';
}

// 生成第一个标签页的模拟数据
const generateFirstTabData = () => {
    return [
        {
            contractnumber: "HT001",
            customerabbreviation: "甲公司",
            customernumber: "C001",
            serviceitem: "软件开发",
            contractstatus: "执行中",
            contractamount: 100000,
            registeredrevenue: 50000,
            auditedrevenue: 40000,
            expenditureamount: 30000,
            refundamount: 0,
            profit: 20000,
            startdate: "2025-01-01",
            expirydate: "2025-12-31",
            signatory: "李四",
            signingdate: "2025-01-01",
            auditor: "王五",
            contractterminationtime: null,
            finalacceptancestatus: "未终验",
            signingDate: "2025-01-01",
            signer: "李四",
            internalReferrer: "张三",
            backupNumber: "BK001",
            contractStartDate: "2025-01-01",
            autoExtension: true,
            voucherHandover: "上门取",
            source: "线上推广",
            otherReferrer: "王五",
            contractRemarks: "重要客户，需要重点关注",
            commissionType: "按价格比例提成"
        },
        {
            contractnumber: "HT002",
            customerabbreviation: "乙公司",
            customernumber: "C002",
            serviceitem: "系统维护",
            contractstatus: "已完成",
            contractamount: 50000,
            registeredrevenue: 50000,
            auditedrevenue: 50000,
            expenditureamount: 20000,
            refundamount: 0,
            profit: 30000,
            startdate: "2024-06-01",
            expirydate: "2025-05-31",
            signatory: "赵六",
            signingdate: "2024-06-01",
            auditor: "孙七",
            contractterminationtime: "2025-06-05",
            finalacceptancestatus: "已终验",
            signingDate: "2024-06-01",
            signer: "赵六",
            internalReferrer: "张三",
            backupNumber: "BK002",
            contractStartDate: "2024-06-01",
            autoExtension: false,
            voucherHandover: "邮寄",
            source: "客户推荐",
            otherReferrer: "",
            contractRemarks: "项目已完成，客户满意度高",
            commissionType: "按单提成"
        },
        {
            contractnumber: "HT003",
            customerabbreviation: "丙公司",
            customernumber: "C003",
            serviceitem: "技术咨询",
            contractstatus: "部分执行",
            contractamount: 30000,
            registeredrevenue: 15000,
            auditedrevenue: 12000,
            expenditureamount: 8000,
            refundamount: 2000,
            profit: 5000,
            startdate: "2025-03-01",
            expirydate: "2025-09-30",
            signatory: "周八",
            signingdate: "2025-03-01",
            auditor: "吴九",
            contractterminationtime: null,
            finalacceptancestatus: "未终验",
            signingDate: "2025-03-01",
            signer: "周八",
            internalReferrer: "",
            backupNumber: "BK003",
            contractStartDate: "2025-03-01",
            autoExtension: true,
            voucherHandover: "客户送",
            source: "展会",
            otherReferrer: "赵六",
            contractRemarks: "长期合作客户",
            commissionType: "不提成"
        }
    ];
}

// 生成第二个标签页的模拟数据
const generateSecondTabData = () => {
    return [
        {
            contractnumber: "HT004",
            customerabbreviation: "丁公司",
            customernumber: "C004",
            serviceitem: "设计服务",
            contractstatus: "待审核",
            contractamount: 80000,
            registeredrevenue: 0,
            auditedrevenue: 0,
            expenditureamount: 0,
            refundamount: 0,
            profit: 0,
            startdate: "2025-02-01",
            expirydate: "2025-08-31",
            signatory: "钱十",
            signingdate: "2025-02-01",
            auditor: "",
            contractterminationtime: null,
            finalacceptancestatus: "未终验",
            signingDate: "2025-02-01",
            signer: "钱十",
            internalReferrer: "孙八",
            backupNumber: "BK004",
            contractStartDate: "2025-02-01",
            autoExtension: false,
            voucherHandover: "上门取",
            source: "广告投放",
            otherReferrer: "",
            contractRemarks: "新客户，需要跟进",
            commissionType: "按比例提成"
        }
    ];
}

// 生成第三个标签页的模拟数据
const generateThirdTabData = () => {
    return [
        {
            contractnumber: "HT005",
            customerabbreviation: "戊公司",
            customernumber: "C005",
            serviceitem: "咨询服务",
            contractstatus: "待财务审核",
            contractamount: 60000,
            registeredrevenue: 30000,
            auditedrevenue: 0,
            expenditureamount: 15000,
            refundamount: 0,
            profit: 15000,
            startdate: "2025-03-15",
            expirydate: "2025-09-15",
            signatory: "孙十一",
            signingdate: "2025-03-15",
            auditor: "李十二",
            contractterminationtime: null,
            finalacceptancestatus: "未终验",
            signingDate: "2025-03-15",
            signer: "孙十一",
            internalReferrer: "吴十",
            backupNumber: "BK005",
            contractStartDate: "2025-03-15",
            autoExtension: true,
            voucherHandover: "邮寄",
            source: "合作伙伴",
            otherReferrer: "郑十一",
            contractRemarks: "咨询项目，需要定期汇报",
            commissionType: "按固定金额提成"
        }
    ];
}

onMounted(() => {
    setTimeout(() => {
        mockData.value = generateFirstTabData();
        loading.value = false
    }, 2000)
})

// 格式化金额显示
const formatAmount = (amount) => {
    return amount.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    });
}

// 合同对话框中的标签页
const contractDialogTab = ref('contractInfo')
</script>

<template>
    <div class="my-clue">
        <div class="top-filter">
            <div class="top-filter-left">
                <stick-popup>
                    <template #show>
                        <div class="top-filter-btn">
                            <div class="top-filter-btn-label">
                                筛选
                            </div>
                            <div class="top-filter-btn-icon">
                                <Operation />
                            </div>
                        </div>
                    </template>
                    <template #content>
                        <!-- 筛选表单 -->
                        <div class="top-filter-form">
                            <el-form :model="form" label-width="100px">
                                <el-form-item label="合同状态">
                                    <div class="checkbox-group">
                                        <el-checkbox-group>
                                            <el-checkbox label="待提交" />
                                            <el-checkbox label="待合同审核" />
                                            <el-checkbox label="合同审核不通过" />
                                            <el-checkbox label="待财务审核" />
                                            <el-checkbox label="财务审核不通过" />
                                            <el-checkbox label="执行中" />
                                            <el-checkbox label="已结束" />
                                            <el-checkbox label="已终止" />
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="合同审核人">
                                    <el-input placeholder="搜索合同审核人" />
                                </el-form-item>
                                <el-form-item label="到期时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span>到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                    <div class="quick-options">
                                        <el-checkbox label="3个月内到期" />
                                        <el-checkbox label="2个月内到期" />
                                        <el-checkbox label="本月到期" />
                                        <el-checkbox label="已到期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="服务产品">
                                    <el-input placeholder="搜索服务产品" />
                                </el-form-item>
                                <el-form-item label="服务项目">
                                    <el-input placeholder="搜索服务项目" />
                                </el-form-item>
                                <el-form-item label="签单人">
                                    <el-input placeholder="搜索签单人" />
                                </el-form-item>
                                <el-form-item label="签单时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span>到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="内部推荐人">
                                    <el-input placeholder="搜索内部推荐人" />
                                </el-form-item>
                                <el-form-item label="其他推荐人">
                                    <el-input placeholder="搜索其他推荐人" />
                                </el-form-item>
                                <el-form-item label="合同审核时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span>到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="财务审核时间">
                                    <div class="date-range">
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                        <span>到</span>
                                        <el-date-picker type="date" placeholder="请选择日期" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="已收费至">
                                    <div class="date-range">
                                        <el-date-picker type="month" placeholder="请选择月份" />
                                        <span>到</span>
                                        <el-date-picker type="month" placeholder="请选择月份" />
                                    </div>
                                </el-form-item>
                                <el-form-item label="合同签约类型">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="续签" />
                                            <el-radio label="新签" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="有无附件">
                                    <div class="radio-group">
                                        <el-radio-group>
                                            <el-radio label="全部" />
                                            <el-radio label="有" />
                                            <el-radio label="无" />
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="联系人">
                                    <el-input placeholder="搜索联系人" />
                                </el-form-item>
                                <el-form-item label="开票状态">
                                    <div class="checkbox-group">
                                        <el-checkbox-group>
                                            <el-checkbox label="未开票" />
                                            <el-checkbox label="部分开票" />
                                            <el-checkbox label="已开完" />
                                            <el-checkbox label="无需开票" />
                                        </el-checkbox-group>
                                    </div>
                                </el-form-item>
                                <el-form-item label="所属部门">
                                    <el-input placeholder="搜索所属部门" />
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <template #footer>
                        <div class="top-filter-operate">
                            <el-button type="text">重置</el-button>
                            <el-button type="primary">确认</el-button>
                        </div>
                    </template>
                </stick-popup>
                <div class="top-filter-search">
                    <el-input v-model="searchKeyword" placeholder="请输入合同编号、客户简称或客户编号" @keyup.enter="handleSearch">
                        <template #append>
                            <el-button :icon="Search" @click="handleSearch" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="top-filter-right">
                <el-button type="primary">导出</el-button>
            </div>
        </div>

        <!-- 编辑合同对话框 -->
        <el-dialog 
            v-model="dialogVisible" 
            title="修改合同" 
            width="90%" 
            :before-close="closeContractDialog"
            class="contract-dialog"
        >
            <div class="contract-dialog-tabs">
                <el-tabs v-model="contractDialogTab" class="contract-tabs">
                    <!-- 合同信息标签页 -->
                    <el-tab-pane label="合同信息" name="contractInfo">
                        <div class="contract-form-container">
                            <!-- 合同基本信息区域 -->
                            <div class="contract-basic-info">
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>合同状态</label>
                                        <el-input v-model="contractForm.contractStatus" placeholder="待提交" disabled />
                                    </div>
                                    <div class="form-item">
                                        <label>签单日期</label>
                                        <el-date-picker v-model="contractForm.signingDate" type="date" placeholder="选择日期" style="width: 100%" />
                                    </div>
                                    <div class="form-item">
                                        <label>签单人</label>
                                        <el-select v-model="contractForm.signer" placeholder="请选择" style="width: 100%">
                                            <el-option label="表格体" value="表格体" />
                                            <el-option label="张三" value="张三" />
                                            <el-option label="李四" value="李四" />
                                            <el-option label="王五" value="王五" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>内部推荐人</label>
                                        <el-select v-model="contractForm.internalReferrer" placeholder="请选择" style="width: 100%">
                                            <el-option label="请选择" value="" />
                                            <el-option label="李四" value="李四" />
                                            <el-option label="张三" value="张三" />
                                            <el-option label="孙八" value="孙八" />
                                        </el-select>
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>产品名称</label>
                                        <el-select v-model="contractForm.productName" placeholder="请选择" style="width: 100%">
                                            <el-option label="自定义/代账合同" value="自定义/代账合同" />
                                            <el-option label="标准服务包" value="标准服务包" />
                                            <el-option label="定制开发" value="定制开发" />
                                            <el-option label="企业云套餐" value="企业云套餐" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>续签状态</label>
                                        <el-select v-model="contractForm.renewalStatus" placeholder="请选择" style="width: 100%">
                                            <el-option label="未续签" value="未续签" />
                                            <el-option label="已续签" value="已续签" />
                                            <el-option label="待续签" value="待续签" />
                                        </el-select>
                                    </div>
                                    <div class="form-item required">
                                        <label>合同编号</label>
                                        <el-input v-model="contractForm.contractNumber" disabled />
                                    </div>
                                    <div class="form-item required">
                                        <label>备用编号</label>
                                        <el-input v-model="contractForm.backupNumber" placeholder="请填写" />
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>签约期限</label>
                                        <div class="contract-term">
                                            <el-input-number v-model="contractForm.contractYears" :min="0" :max="99" />
                                            <span>年</span>
                                            <el-input-number v-model="contractForm.contractMonths" :min="0" :max="11" />
                                            <span>月</span>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label>合同有效期</label>
                                        <div class="date-range">
                                            <el-date-picker v-model="contractForm.contractStartDate" type="date" placeholder="开始日期" style="width: 48%" />
                                            <span>至</span>
                                            <el-date-picker v-model="contractForm.contractEndDate" type="date" placeholder="结束日期" style="width: 48%" />
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-row">
                                    <div class="form-item">
                                        <label>自动延期</label>
                                        <div class="radio-group">
                                            <el-radio-group v-model="contractForm.autoExtension">
                                                <el-radio :label="true">是</el-radio>
                                                <el-radio :label="false">否</el-radio>
                                            </el-radio-group>
                                        </div>
                                    </div>
                                    <div class="form-item">
                                        <label>凭证交接</label>
                                        <el-select v-model="contractForm.voucherHandover" placeholder="请选择" style="width: 100%">
                                            <el-option label="上门取" value="上门取" />
                                            <el-option label="邮寄" value="邮寄" />
                                            <el-option label="客户送" value="客户送" />
                                        </el-select>
                                    </div>
                                    <div class="form-item required">
                                        <label>来源</label>
                                        <el-select v-model="contractForm.source" placeholder="请选择" style="width: 100%">
                                            <el-option label="请选择" value="" />
                                            <el-option label="线上推广" value="线上推广" />
                                            <el-option label="客户推荐" value="客户推荐" />
                                            <el-option label="展会" value="展会" />
                                            <el-option label="广告投放" value="广告投放" />
                                            <el-option label="合作伙伴" value="合作伙伴" />
                                        </el-select>
                                    </div>
                                    <div class="form-item">
                                        <label>其他推荐人</label>
                                        <el-input v-model="contractForm.otherReferrer" placeholder="请填写" />
                                    </div>
                                </div>
                            </div>

                            <!-- 服务项区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>服务项(O)</span>
                                    <div class="section-actions">
                                        <el-button type="primary" size="small">添加服务项目</el-button>
                                        <el-button type="primary" size="small">合同变更</el-button>
                                        <el-button type="primary" size="small">签单折扣</el-button>
                                    </div>
                                </div>
                                <div class="empty-section">
                                    <span>暂无服务项</span>
                                </div>
                            </div>

                            <!-- 赠送服务项区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>赠送服务项(O)</span>
                                    <div class="section-actions">
                                        <el-button type="primary" size="small">添加赠送服务项目</el-button>
                                    </div>
                                </div>
                                <div class="empty-section">
                                    <span>暂无赠送服务项</span>
                                </div>
                            </div>

                            <!-- 预收款区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>预收款*</span>
                                </div>
                                <div class="empty-section">
                                    <span>暂无预收款</span>
                                </div>
                            </div>

                            <!-- 默认支出区域 -->
                            <div class="service-section">
                                <div class="section-header">
                                    <span>默认支出</span>
                                </div>
                                <div class="empty-section">
                                    <span>暂无默认支出</span>
                                </div>
                            </div>

                            <!-- 合同备注区域 -->
                            <div class="remarks-section">
                                <label>合同备注</label>
                                <el-input 
                                    v-model="contractForm.contractRemarks" 
                                    type="textarea" 
                                    placeholder="请输入" 
                                    :rows="3" 
                                    maxlength="1000"
                                    show-word-limit
                                />
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 回款计划标签页 -->
                    <el-tab-pane label="回款计划" name="paymentPlan">
                        <div class="empty-state">
                            <p>还没有回款计划哦!</p>
                        </div>
                    </el-tab-pane>

                    <!-- 收支开票标签页 -->
                    <el-tab-pane label="收支开票" name="incomeExpense">
                        <div class="income-expense-container">
                            <div class="section">
                                <h3>收支开票情况</h3>
                                <div class="empty-state">
                                    <p>暂无收支开票</p>
                                </div>
                            </div>
                            
                            <!-- 收费记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>收费记录</h3>
                                    <el-button type="primary" size="small">登记收费</el-button>
                                </div>
                                <div class="record-table">
                                    <table class="custom-table">
                                        <thead>
                                            <tr>
                                                <th>登记时间</th>
                                                <th>收费服务项</th>
                                                <th>登记人</th>
                                                <th>审核状态</th>
                                                <th>实收金额</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2025-10-27 10:17</td>
                                                <td>代理记账</td>
                                                <td>表情休</td>
                                                <td>待审核</td>
                                                <td>0.00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 支出记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>支出记录</h3>
                                    <el-button type="primary" size="small">添加支出</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无支出记录</p>
                                </div>
                            </div>
                            
                            <!-- 退款记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>退款记录</h3>
                                    <el-button type="primary" size="small">退款</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无退款记录</p>
                                </div>
                            </div>
                            
                            <!-- 开票记录 -->
                            <div class="section">
                                <div class="section-header-with-button">
                                    <h3>开票记录</h3>
                                    <el-button type="primary" size="small">申请开票</el-button>
                                </div>
                                <div class="empty-state">
                                    <p>暂无开票记录</p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 合同附件标签页 -->
                    <el-tab-pane label="合同附件" name="contractAttachments">
                        <div class="attachments-container">
                            <div class="upload-area">
                                <div class="upload-content">
                                    <p>拖拽文件到此处或 <el-button type="primary" link>点击上传</el-button></p>
                                    <p class="upload-tip">文件可上传jpg、png、jpeg、doc、docx、xls、xlsx、pdf类型文件，每次上传不超过10M</p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <!-- 提成设置标签页 -->
                    <el-tab-pane label="提成设置" name="commissionSettings">
                        <div class="commission-container">
                            <div class="commission-section">
                                <h3 class="commission-title">签单提成</h3>
                                <div class="commission-options">
                                    <!-- 主提成类型 -->
                                    <div class="commission-row">
                                        <el-radio v-model="contractForm.commissionMainType" label="按价格比例提成">按价格比例提成</el-radio>
                                        <el-radio v-model="contractForm.commissionMainType" label="按单提成">按单提成</el-radio>
                                    </div>
                                    
                                    <!-- 子提成类型 - 只在选择"按单提成"时显示 -->
                                    <div v-if="showCommissionSubTypes" class="commission-sub-options">
                                        <div class="commission-row">
                                            <el-radio v-model="contractForm.commissionSubType" label="不提成">不提成</el-radio>
                                            <el-radio v-model="contractForm.commissionSubType" label="按比例提成">按比例提成</el-radio>
                                            <el-radio v-model="contractForm.commissionSubType" label="按固定金额提成">按固定金额提成</el-radio>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 当前选择的提成方式提示 -->
                                <div class="commission-selection-info">
                                    <p>当前选择的提成方式: 
                                        <span class="selection-text">
                                            {{ contractForm.commissionMainType === '按价格比例提成' ? 
                                                '按价格比例提成' : 
                                                contractForm.commissionSubType }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeContractDialog">取消</el-button>
                    <el-button type="primary" @click="submitContract">保存修改</el-button>
                </span>
            </template>
        </el-dialog>

        <div class="table-area">
            <div class="table-area-tab">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="全部合同" name="first"></el-tab-pane>
                    <el-tab-pane label="待合同审核" name="second"></el-tab-pane>
                    <el-tab-pane label="待财务审核" name="third"></el-tab-pane>
                </el-tabs>
            </div>

            <!-- 搜索结果显示 -->
            <div v-if="searchKeyword" class="search-result-info">
                <span>搜索"{{ searchKeyword }}"的结果，共找到 {{ filteredData.length }} 条记录</span>
                <el-button type="text" @click="clearSearch">清除搜索</el-button>
            </div>

            <!-- 金额统计栏 - 调整到标签下方 -->
            <div class="amount-statistics">
                <div class="stat-item">
                    <span class="stat-label">总金额:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.totalAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已收:</span>
                    <span class="stat-value received">{{ formatAmount(amountStatistics.receivedAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">未收:</span>
                    <span class="stat-value unreceived">{{ formatAmount(amountStatistics.unreceivedAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已审核收入:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.auditedRevenue) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">退款金额:</span>
                    <span class="stat-value refund">{{ formatAmount(amountStatistics.refundAmount) }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">利润:</span>
                    <span class="stat-value">{{ formatAmount(amountStatistics.profit) }}</span>
                </div>
            </div>

            <div class="table-area-table">
                <my-table :loading="loading" :columns="columns" :dataSource="filteredData" :showIndex="true"
                    :show-operation="true">
                    <template #operation="{ row }">
                        <div class="operation-buttons">
                            <el-button 
                                type="primary" 
                                size="small" 
                                :icon="Edit"
                                @click="openEditContractDialog(row)"
                                class="edit-btn"
                            >
                                修改
                            </el-button>
                            <el-button 
                                type="danger" 
                                size="small" 
                                :icon="Delete"
                                @click="handleDelete(row)"
                                class="delete-btn"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </my-table>
            </div>
        </div>
    </div>
</template>



<style lang="less" scoped>
.my-clue {
    width: 100%;
    height: 100%;
    background-color: rgb(239, 239, 239);
    overflow: auto;
}

.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}

.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;

    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;

        .top-filter-btn-icon {
            width: 20px;
            height: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .top-filter-search {
        width: 300px; /* 增加宽度以容纳更长的提示文本 */
    }
}

.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;

    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }

    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form {
    width: 600px;
    background-color: #fff;
    padding: 16px;
}

.top-filter-operate {
    width: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    padding: 0 16px;
    background: #fff;
}

/* 表单样式调整 */
:deep(.el-form-item) {
    margin-bottom: 16px;
}

.checkbox-group,
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

/* 搜索结果显示样式 */
.search-result-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f9ff;
    padding: 10px 16px;
    margin: 16px 0;
    border-radius: 4px;
    border-left: 4px solid #1890ff;
    color: #1890ff;
    font-size: 14px;
}

/* 金额统计栏样式 - 按照图片样式调整 */
.amount-statistics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 12px 20px;
    margin: 16px 0;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    flex-wrap: wrap;
    gap: 20px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.stat-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.stat-value {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

/* 按照图片中的颜色设置 */
.stat-value.received,
.stat-value.unreceived,
.stat-value.refund {
    color: #e6a23c;
    /* 橙色 */
}

/* 操作按钮样式 */
.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.edit-btn,
.delete-btn {
    min-width: 60px;
}

/* 合同对话框样式 */
.contract-dialog {
    .contract-dialog-tabs {
        max-height: 70vh;
        overflow-y: auto;
        padding-right: 10px;
    }

    .contract-tabs {
        :deep(.el-tabs__header) {
            margin-bottom: 20px;
        }
    }

    .contract-basic-info {
        margin-bottom: 20px;
    }

    .form-row {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
        align-items: flex-start;

        .form-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            label {
                font-size: 14px;
                margin-bottom: 6px;
                color: #333;
                
                &.required::before {
                    content: '*';
                    color: #f56c6c;
                    margin-right: 4px;
                }
            }
        }
    }

    .contract-term {
        display: flex;
        align-items: center;
        gap: 8px;
        
        :deep(.el-input-number) {
            width: 80px;
        }
        
        span {
            color: #666;
            font-size: 14px;
        }
    }

    .date-range {
        display: flex;
        align-items: center;
        gap: 8px;
        
        span {
            color: #666;
            font-size: 14px;
        }
    }

    .radio-group {
        display: flex;
        gap: 16px;
        margin-top: 6px;
    }

    .service-section {
        margin-bottom: 20px;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            
            span {
                font-weight: 600;
                color: #333;
            }
            
            .section-actions {
                display: flex;
                gap: 8px;
            }
        }
        
        .empty-section {
            padding: 40px 20px;
            text-align: center;
            color: #999;
            background-color: #fff;
        }
    }

    .remarks-section {
        margin-bottom: 20px;
        
        label {
            display: block;
            font-size: 14px;
            margin-bottom: 6px;
            color: #333;
        }
    }

    .submit-section {
        text-align: center;
        padding: 20px;
        border-top: 1px solid #e9ecef;
        margin-top: 20px;
        
        .submit-tip {
            margin-left: 12px;
            color: #999;
            font-size: 14px;
        }
    }

    /* 空状态样式 */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
        color: #999;
        background-color: #fff;
        border-radius: 4px;
        border: 1px dashed #e9ecef;
        
        p {
            margin: 0;
            font-size: 16px;
        }
    }

    /* 收支开票样式 */
    .income-expense-container {
        .section {
            margin-bottom: 24px;
            
            h3 {
                margin-bottom: 12px;
                font-size: 16px;
                color: #333;
                font-weight: 600;
            }
            
            .section-header-with-button {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
                
                h3 {
                    margin-bottom: 0;
                }
            }
            
            .empty-state {
                padding: 30px 20px;
            }
            
            .record-table {
                background-color: #fff;
                border-radius: 4px;
                border: 1px solid #e9ecef;
                overflow: hidden;
                
                .custom-table {
                    width: 100%;
                    border-collapse: collapse;
                    
                    th, td {
                        padding: 12px 16px;
                        text-align: left;
                        border-bottom: 1px solid #e9ecef;
                    }
                    
                    th {
                        background-color: #f8f9fa;
                        font-weight: 600;
                        color: #333;
                    }
                    
                    td {
                        color: #666;
                    }
                    
                    tr:last-child td {
                        border-bottom: none;
                    }
                }
            }
        }
    }

    /* 合同附件样式 */
    .attachments-container {
        .upload-area {
            border: 2px dashed #e9ecef;
            border-radius: 6px;
            padding: 60px 20px;
            text-align: center;
            background-color: #fafafa;
            transition: border-color 0.3s;
            
            &:hover {
                border-color: #409eff;
            }
            
            .upload-content {
                p {
                    margin: 8px 0;
                    color: #666;
                }
                
                .upload-tip {
                    font-size: 14px;
                    color: #999;
                }
            }
        }
    }

    /* 提成设置样式 */
    .commission-container {
        padding: 20px;
        
        .commission-section {
            .commission-title {
                font-size: 16px;
                font-weight: 600;
                color: #333;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #e9ecef;
            }
            
            .commission-options {
                display: flex;
                flex-direction: column;
                gap: 24px;
                
                .commission-row {
                    display: flex;
                    gap: 40px;
                    
                    :deep(.el-radio) {
                        margin-right: 0;
                    }
                }
                
                .commission-sub-options {
                    margin-left: 20px;
                    padding: 16px;
                    background-color: #f8f9fa;
                    border-radius: 6px;
                    border-left: 4px solid #409eff;
                    
                    .commission-row {
                        gap: 30px;
                    }
                }
            }
            
            .commission-selection-info {
                margin-top: 20px;
                padding: 12px 16px;
                background-color: #f0f9ff;
                border-radius: 4px;
                border: 1px solid #e1f5fe;
                
                p {
                    margin: 0;
                    font-size: 14px;
                    color: #666;
                }
                
                .selection-text {
                    font-weight: 600;
                    color: #1890ff;
                }
            }
        }
    }

    .dialog-footer {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid #e9ecef;
    }

    /* 滚动条样式 */
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .amount-statistics {
        justify-content: flex-start;
    }
    
    .contract-dialog {
        width: 95% !important;
    }
    
    .contract-form-container .form-row {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .amount-statistics {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .stat-item {
        width: 100%;
        justify-content: space-between;
    }
    
    .top-filter {
        height: auto;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
    
    .top-filter-left {
        width: 100%;
        justify-content: space-between;
    }
    
    .top-filter-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    .search-result-info {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .operation-buttons {
        flex-direction: column;
        gap: 4px;
    }
    
    .edit-btn,
    .delete-btn {
        min-width: 50px;
        font-size: 12px;
    }
    
    .section-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .section-header-with-button {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .commission-options .commission-row {
        flex-direction: column;
        gap: 16px !important;
    }
    
    .commission-sub-options {
        margin-left: 0 !important;
    }
}
</style>